<template>
  <el-dialog title="添加模板" v-model="visible" width="500px" :fullscreen="mobile" @close="handleCancel">
    <el-form :model="form" ref="formRef" label-width="80px">
      <el-form-item label="模板名称" prop="title" :rules="[{ required: true, message: '请输入模板名称', trigger: 'blur' }]">
        <el-input v-model="form.title" placeholder="请输入模板名称"></el-input>
      </el-form-item>
      <el-form-item label="模板内容" prop="start">
        <el-input
          v-model="form.start"
          type="textarea"
          :rows="4"
          resize="none"
          maxlength="300"
          show-word-limit
          placeholder="请输入模板开头"
        />
      </el-form-item>
      <template v-if="type === 'pwd'">
        <el-form-item label="" style="margin-bottom: 0;">
          房间：<span class="warning-word">{房间名}</span>
        </el-form-item>
        <el-form-item label="" style="margin-bottom: 0;">
          密码：<span class="warning-word">{密码}</span>
        </el-form-item>
        <el-form-item label="" prop="dateFlag">
          有效期：<span class="warning-word">{有效期}</span>
          <el-checkbox v-model="form.dateFlag" class="ml10">有效期</el-checkbox>
        </el-form-item>
      </template>
      <template v-if="type === 'press'">
        <el-form-item label="" style="margin-bottom: 0;">
          房间：<span class="warning-word">{房间名}</span>
        </el-form-item>
        <el-form-item label="" style="margin-bottom: 0;">
          账单名称：<span class="warning-word">{费用名称}</span>
        </el-form-item>
        <el-form-item label="" style="margin-bottom: 0;">
          金额：<span class="warning-word">{金额}</span>
        </el-form-item>
        <el-form-item label="" prop="dateFlag">
          请点击 <span class="warning-word">{url链接}</span>
          <el-checkbox v-model="form.dateFlag" class="ml10"></el-checkbox>
        </el-form-item>
      </template>
      <template v-if="type === 'key'">
        <el-form-item label="">
          你收到一把电子钥匙，请点击<span class="warning-word">{url链接}</span>“创泰”小程序来开门
        </el-form-item>
      </template>
      <el-form-item label="" prop="end">
        <el-input
          v-model="form.end"
          type="textarea"
          :rows="4"
          resize="none"
          maxlength="300"
          show-word-limit
          placeholder="请输入模板结尾"
        />
      </el-form-item>
      <el-form-item label="预览">
        <div class="el-textarea el-textarea__inner">
          <div v-if="form.start">{{ form.start }}</div>
          <template v-if="type === 'pwd'">
            <div>房间：<span class="warning-word">201</span></div>
            <div>密码：<span class="warning-word">332211</span></div>
          </template>
          <template v-if="type === 'press'">
            <div>房间：<span class="warning-word">201</span></div>
            <div>账单名称：<span class="warning-word">房租</span></div>
            <div>金额：<span class="warning-word">2300.00</span></div>
          </template>
          <div v-if="type === 'key'">你收到一把电子钥匙，请点击<span class="warning-word">{url链接}</span>“创泰”小程序来开门</div>
          <div v-if="type === 'key' && form.dateFlag">有效期：<span class="warning-word">2021.12.11 12:00-2021.12.12 13:00</span>，密码需要在<span class="warning-word">2021.12.12 12:00</span>前使用过，否则将失效。</div>
          <div v-if="form.end">
            <span v-if="type === 'press' && form.dateFlag">请点击<span class="warning-word">{url链接}</span></span>{{ form.end }}
          </div>
        </div>
        <div>预计产生短信条数：2</div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleOk">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="TemplateDl">
import useAppStore from '@/store/modules/app'

const pwdForm = {
  title: '',
  start: '您好：',
  dateFlag: true,
  end: '输入密码后请按#号键或其他开锁键结束。',
}
const keyForm = {
  title: '',
  start: '您好：',
  end: '',
}
const pressForm = {
  title: '',
  start: '您好，您有一笔账单待支付',
  end: '进入“创寓”小程序完成支付。',
  priority: true,
  dateFlag: true,
}

const { proxy } = getCurrentInstance()
const emit = defineEmits()
const props = defineProps({
  type: {
    type: String,
    default: 'pwd'
  }
})
const visible = ref(false)
const data = reactive({
  form: {
    title: '',
    start: '',
    dateFlag: '1',
    end: '',
  }
})
const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')

watch(() => visible.value, value => {
  if (value) {
    console.log(props.type);
    switch (props.type) {
      case 'pwd':
        form.value = { ...pwdForm }
        break;
      case 'key':
        form.value = { ...keyForm }
        break;
      case 'press':
        form.value = { ...pressForm }
        break;
      default:
        break;
    }
  }
})

/* 控制弹窗打开 */
function show() {
  visible.value = true
}

defineExpose({
  show
})

function handleCancel() {
  visible.value = false
}

function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      console.log(form.value)
      emit('success', props.type)
      // visible.value = false
    }
  })
}

</script>

<style lang="scss" scoped>
.warning-word {
  color: var(--el-color-warning);
}
.el-textarea__inner {
  white-space: pre-wrap;
}
</style>